<template>
  <div>
    <div id="map"
         class="map">
    </div>
  </div>
</template>
<script>

import Map from 'ol/Map';
import View from 'ol/View';
import { easeIn, easeOut } from 'ol/easing';
import TileLayer from 'ol/layer/Tile';
import { fromLonLat } from 'ol/proj';
import OSM from 'ol/source/OSM';
import TileDebug from 'ol/source/TileDebug';
import 'ol/ol.css';
import { defaults as defaultControls, Attribution } from 'ol/control.js';
import BingMaps from 'ol/source/BingMaps';
import { fromLonLat } from 'ol/proj.js';


export default {
  data () {
    return {
      map: null
    }
  },
  methods: {

  },
  mounted () {
    var osm = new OSM();
    this.map = new Map({
      layers: [new TileLayer({
        source: osm
      }),
      new TileDebug({
        tileGrid: osm.getTileGrid(),
        projection: 'EPSG:3857',
      })
      ],
      target: 'map',
      view: new View({
        center: fromLonLat([-0.1275, 51.507222]),
        zoom: 10
      })
    });
  },
}
</script>
<style lang="sass" scoped>
#map {height: 800px;}
</style>
